import {ScrollView} from 'react-native-gesture-handler';
import {StyleSheet, Text, View, Image, ImageBackground, Alert} from 'react-native';
import React, {Component} from 'react';
import {Flex, WhiteSpace, Button, List, Toast, InputItem, Modal, PickerView, Provider} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import store from '~/store';
import {
    getOrderInfoByItemID,
    createTakeOrder,
    getPackageEdit,
    getPackageItemListApi,
    getParkingPackageInfo,
    orderPay,
    getOrderInfo,
    getOrderPaymentVoucher,
} from '~/api/order';
import {GetUserAddressInfo} from '~/api/owner';
import {getHttpUrl} from '~/api/basic';
import {getParkingOrderInfo, setParkingOrderGiftState, setParkingOrderIsFullPay} from '~/api/parking';
import Spinner from 'react-native-loading-spinner-overlay';
import Album from '~/pages/home/album/Album';
import {upLoadOrderPaymentVoucher} from '~/api/upload';
export default class PackageOrder extends Component {
    static navigationOptions = ({navigation}) => {
        return {
            title: '上传支付凭证',
        };
    };
    constructor(props) {
        super(props);
        const getters = store.getState();
        this.state = {
            orderid: this.props.navigation.getParam('orderid'), //orderdataid
            parkorderid: this.props.navigation.getParam('parkorderid'),
            xiangqing: this.props.navigation.getParam('xiangqing'),
            baseurl: '',
            filelist: '',
            list: [],
            itemlist: [],
            iteminfo: '',
            files: [],
            spinner: false,
            a: 1,
            payfilelist: [],
        };
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });
        this.getparkpackinfo(this.state.orderid);
        getOrderPaymentVoucher({order_id: this.state.orderid}).then((r) => {
            if (r.code === 0) {
                this.setState({
                    payfilelist: r.data,
                });
            } else {
                Toast.info(r.msg);
            }
        });
        //图片上传
        this.onUpload = (files) => {
            this.setState({
                spinner: true,
            });
            upLoadOrderPaymentVoucher(files)
                .then((r) => {
                    if (r.code === 0) {
                        this.setState({
                            spinner: false,
                            filelist: [r.data.OrderFileID],
                        });
                        Modal.alert('提示', '您的凭证已上传成功，平台会在一个工作日内完成审核，届时将以短信通知', [{text: '确定'}]);
                    } else {
                        Toast.info('失败', 1);
                    }
                })
                .catch((error) => {
                    console.log(error);
                    this.setState({
                        spinner: false,
                        a: 0,
                    });
                });
        };
    }
    //获取车位套餐信息与明细列表
    getparkpackinfo(orderid) {
        getOrderInfo({
            order_id: orderid,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    itemlist: r.data.item_list,
                    iteminfo: r.data.order_info,
                });
            }
        });
    }

    oncomfie = () => {
        if (this.state.filelist === '') {
            Toast.info('请上传支付凭证');
        } else {
            orderPay({
                order_id: this.state.orderid,
                pay_mode: 9,
                pay_pv_list: this.state.filelist,
            }).then((r) => {
                if (r.code === 0) {
                    this.props.navigation.push('SaleOrder');
                }
            });
        }
    };
    grantpackage = () => {
        Modal.alert('提示', '确认发放赠品？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderGiftState({
                        ParkingOrderID: this.state.parkorderid,
                    }).then((r) => {
                        if (r.code === 0) {
                            Toast.info('发放成功');
                            this.props.navigation.push('SaleOrder');
                        }
                    });
                },
            },
        ]);
    };
    render() {
        return (
            <View style={{width: '100%', height: '100%', paddingTop: 10}}>
                <View style={{width: '94%', marginLeft: '3%', marginRight: '3%', height: '70%'}}>
                    <Flex style={{width: '100%', backgroundColor: 'white', borderRadius: 10}}>
                        <Flex style={{width: '100%', height: 83, backgroundColor: 'white', borderRadius: 10}}>
                            <Flex style={{width: '13%'}} justify={'center'}>
                                <Image style={{width: 16.5, height: 20}} source={require('~/assets/li/weizhi.png')} />
                            </Flex>
                            <Flex direction={'column'} style={{width: '79%'}}>
                                <Flex>
                                    <Text style={{width: '100%', fontSize: 13, color: '#393B46', fontWeight: '500'}} numberOfLines={2}>
                                        {this.state.iteminfo.ReceiveCityName}
                                    </Text>
                                </Flex>
                            </Flex>
                            <Flex style={{width: '8%'}} justify={'center'}>
                                <Image style={{width: 12, height: 12}} source={require('~/assets/li/right.png')} />
                            </Flex>
                        </Flex>
                    </Flex>
                    <View
                        style={{
                            width: '100%',
                            backgroundColor: 'white',
                            marginTop: 10,
                            paddingLeft: 10,
                            paddingRight: 10,
                            paddingBottom: 10,
                            borderRadius: 10,
                        }}>
                        <Flex
                            style={{width: '100%', marginTop: 10}}
                            wrap={'wrap'}
                            onPress={() => {
                                this.props.navigation.push('GiftList', {
                                    params: this.state.iteminfo.PackageOrderDataID,
                                });
                            }}>
                            {this.state.itemlist.map((item, index) => {
                                return index < 3 ? (
                                    <View style={{width: '25%', padding: 5}}>
                                        <Image style={{width: '100%', aspectRatio: 1 / 1}} source={{uri: this.state.baseurl + item.ProductImage}} />
                                    </View>
                                ) : (
                                    <Text>....</Text>
                                );
                            })}
                        </Flex>
                        <Flex style={{width: '100%', marginTop: 10}}>
                            <Flex direction={'column'} style={{width: '75%', aspectRatio: 3 / 1, paddingLeft: 10}}>
                                <Flex style={{width: '100%', height: '60%'}} justify={'start'} align={'start'}>
                                    <Text numberOfLines={2} style={{paddingTop: 5, fontSize: 14, fontWeight: 'bold', color: '#393B46'}}>
                                        {this.state.iteminfo.PackageName}
                                    </Text>
                                </Flex>
                                <Flex style={{width: '100%', height: '40%', paddingBottom: 5}} align={'end'}>
                                    <Text style={{color: '#FF0600', fontSize: 13, fontWeight: 'bold'}}>
                                        原价:{this.state.iteminfo.PriceMarketTotal}元
                                    </Text>
                                    <Text style={{color: '#FF0600', fontSize: 13, fontWeight: 'bold', paddingLeft: 10}}>
                                        采购价：{this.state.iteminfo.PriceFeeTotal}元
                                    </Text>
                                    <Text style={{paddingLeft: 10, color: '#BBBBBB', fontSize: 10, fontWeight: '500'}}>
                                        共{this.state.itemlist.length}件
                                    </Text>
                                </Flex>
                            </Flex>
                        </Flex>
                    </View>
                    {(this.state.iteminfo.PayState === 2 || this.state.iteminfo.PayState === 3) && (
                        <View style={{marginTop: 10}}>
                            <Spinner visible={this.state.spinner} textContent={'上传中...'} />
                            <Album
                                onSelect={(files) => {
                                    this.onUpload(files);
                                }}
                                id={0}
                                name="image"
                                spinner={this.state.a === 0 ? 0 : 1}
                            />
                        </View>
                    )}
                    <WhiteSpace size="md" />
                    <Flex wrap="wrap" style={{backgroundColor: '#ffffff', padding: 10}}>
                        {this.state.payfilelist.length > 0 &&
                            this.state.payfilelist.map((item) => {
                                return (
                                    <Image
                                        style={{width: 100, height: 100, marginRight: 10}}
                                        source={{uri: this.state.baseurl + '/PaymentVoucher/' + item.FileName}}
                                    />
                                );
                            })}
                    </Flex>
                </View>
                <Flex style={{width: '100%', height: '30%'}} align={'end'}>
                    <Flex
                        onPress={() => {
                            switch (this.state.iteminfo.PayState) {
                                case 1:
                                    this.grantpackage();
                                    break;
                                case 2:
                                    this.oncomfie();
                                    break;
                                case 3:
                                    this.oncomfie();
                                    break;
                                case 4:
                                    Toast.info('支付凭证审核中');
                                    break;
                            }
                        }}
                        style={{width: '100%', height: 50, backgroundColor: 'white', paddingTop: 8, paddingRight: 10}}
                        justify={'end'}
                        align={'start'}>
                        {this.state.xiangqing != 1 && (
                            <ImageBackground style={{width: 94, height: 35}} source={require('~/assets/li/queding.png')}>
                                <Text style={{color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center', paddingTop: 10}}>
                                    {(this.state.iteminfo.PayState === 2 || this.state.iteminfo.PayState === 3) && '保存'}
                                    {this.state.iteminfo.PayState === 1 && '下发赠品'}
                                    {this.state.iteminfo.PayState === 4 && '审核中'}
                                </Text>
                            </ImageBackground>
                        )}
                    </Flex>
                </Flex>
            </View>
        );
    }
}
const styles = StyleSheet.create({});
